<template>
	<view>
		<view class="navbar sticky top0 border-box"
			:style="{'backgroundColor':props.bg,'position':props.fixed?'fixed':'absolute'}">
			<view class="navBarGap"></view>
			<view class="navbar-sub relative">
				<view class="left absolute zi2" @click="left">
					<template v-if="props.leftText">
						<image v-if="props.leftIcon === 'default'" class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/nav/0.png" />
						<image v-if="props.leftIcon === 'line'" class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/nav/1.png" />
					</template>
				</view>
				<view :style="{color:props.titleColor}">{{props.title}}</view>
			</view>
		</view>
		<u-gap height="176rpx" v-if="props.placeholder && props.fixed"></u-gap>
	</view>
</template>

<script setup>
	const props = defineProps({
		leftIcon: {
			type: String,
			default: "default"
		},
		titleColor: {
			type: String,
			default: "#fff"
		},
		placeholder: {
			type: Boolean,
			default: true
		},
		fixed: {
			type: Boolean,
			default: true
		},
		bg: {
			type: String,
			default: "#A72530"
		},
		leftText: {
			type: Boolean,
			default: true
		},
		title: {
			type: String,
			default: "欣家服"
		}
	})

	const left = () => uni.navigateBack()
</script>

<style scoped lang="scss">
	.navbar {
		width: 100%;
		height: 176rpx;
		padding: 0 0 14rpx;
		z-index: 999;
		transition: background .2s;

		.navbar-sub {
			line-height: 58rpx;
			text-align: center;

			.left {
				width: 100rpx;
				height: 34rpx;
				left: 18rpx;
				top: 50%;
				transform: translateY(-50%);

				image {
					width: 18rpx;
					height: 34rpx;
				}
			}

			view {
				font-size: 40rpx;
				font-weight: 400;
				line-height: 57.92rpx;
				color: rgba(255, 255, 255, 1);
			}
		}
	}
</style>